<template>
	<view class="productDetail">
		<view class="imgView">
			<image class="img" :src="info.card_cover"  mode="widthFix" ></image>
			<view class="downloadView" v-if="isShowDownload">
				<datediff :startTime="info.startTime" :endTime="info.endTime" endTitle="领取倒计时" @countdownEnd="countdownEnd"/>
			</view>
		</view>
		
		<view class="info">
			<view class="top">
				<view class="title">{{info.card_title}}</view>
				<view class="sketch">{{info.card_sketch}}</view>
			</view>
			<view>赠送人：{{info.send_name}}（{{info.send_mobile}}）</view>
			<view>受赠人：{{info.give_name}}（{{info.give_mobile}}）</view>
			<view>赠送时间：{{info.created_at}}</view>
			<view class="showStatusName">
				<SRV-status v-if="info.statusName != ''" class="statusBox" :name="info.statusName"  size="160" fontSize="36" boder="5" :color="info.status==1 ? '#008dd3' : (info.status==3||info.status==4||info.status==5 ? '#cc0000' : '#009900')" ></SRV-status>
			</view>
			<view v-if="info.updated_title != ''">{{info.updated_title}}：{{info.updated_at}}</view>
		</view>
		<view class="bot" v-if="accessToken == '' && info.status == 1">
			<view class="txt2">
				<view class="btn goReject"  @click="jump('login')" style="width: 100%;">登录领取</view>
			</view>
		</view>
		<view class="bot" v-if="accessToken != '' && (info.isCancel || info.isReceive)">
			<view class="txt2">
				<view class="btn goShare"  @click="showShareFun()" v-if="info.isCancel">分享</view>
				<view class="btn goCancel"  @click="cancelFun()" v-if="info.isCancel">撤回</view>
				<view class="btn goReceive"  @click="receiveFun()" v-if="info.isReceive">接受</view>
				<view class="btn goReject"  @click="rejectFun()" v-if="info.isReceive">退回</view>
			</view>
		</view>
		<uni-popup ref="previewpup" type="center">
			<view class="popbox">
				<swiper class="swiper" duration="500" :circular="false" :skip-hidden-item-layout="true" :disable-programmatic-animation="true" >
					<swiper-item  class="swiper-item" v-for="(itemImg,index) in info.shareList"  :key="index" :item-id="'swiper-item-' + index" >
						<view class="imagebox">	
							<image mode="widthFix" :lazy-load="true" :src="itemImg.max" :data-src="itemImg.src" />
						</view>
					</swiper-item>
				</swiper>
				
				<!-- 状态标识 -->
				<view class="maskshowrev">
				    <button class="btall bt2" open-type="share" @click="shareFun(1)">
				        <uni-icons type="weixin" color="#ccc" size="15"></uni-icons>
				        <text>发送给好友</text>
				    </button>
					<button class="btall bt3" @click="shareFun(3)">
					    <uni-icons type="pulldown" color="#ccc" size="15"></uni-icons>
					    <text>下载</text>
					</button>
					<button class="btall bt1" @click="shareFun(4)">
					    <uni-icons type="close" color="#ccc" size="15"></uni-icons>
					    <text>关闭</text>
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import common from '../../static/jump.js';
	import ShareIndex from '../../static/share.js';
	import {Base64} from '../../static/base64.min.js';
	import datediff from "@/components/ywz-DateDiff/ywz-DateDiff.vue"
	export default { 
		mixins: [ShareIndex],
		components: {datediff},
		data() {
			return {
				id : 0,
				accessToken: '',
				info: {
					card_title: '',
					card_cover: '',
					card_sketch: '',
					card_code: '',
					send_name: '',
					send_mobile: '',
					give_name: '',
					give_mobile: '',
					give_info: '',
					status: 0,
					statusName: '',
					startTime: 0,
					endTime: 0,
					created_at: '',
					updated_title: '',
					updated_at: '',
					isCancel: false,
					isReceive: false,
					shareList: []
				},
				isShowDownload : false,
			}
		}, 
		methods: {
			getInfo() {
				let that = this;
				serve.request({
	                url: '/member/member/give-info',
	                data: {
	                    id: that.id
	                }
	            }).then(res => {
	                if(res.code != 200) {
	                    uni.showToast({
	                        title: res.message,
	                        icon : 'none',
	                        success:function(){ 
	                            setTimeout(function () { 
	                                that.jump('card_list')
	                            }, 2000) 
	                        } 
	                    });
	                    return;
	                }
	                that.info = res.data;
					that.shareItem = that.info.shareList[0];
					that.isShowDownload = (new Date()).getTime() < that.info.endTime;
					that.$forceUpdate();
	            });
			},
			countdownEnd() {
				console.info("countdownEnd");
				this.getInfo();
			},
			showShareFun() {
				this.$refs.previewpup.open();  
			},
			shareFun(type) {
				if(type == 3) {
					var imgUrl = this.shareItem.imageUrl;
					uni.showModal({
						title: '提示',
						content: '确定要下载海报到您的相册吗',
						success: function (res) {
							if (res.confirm) {
								uni.downloadFile({
									url: imgUrl,
									success: (res) =>{
										if (res.statusCode === 200){
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function() {
													uni.showToast({
														title: "保存成功",
														icon: "none"
													});
												},
												fail: function() {
													uni.showToast({
														title: "保存失败",
														icon: "none"
													});
												}
											});
										} 
									},
									fail: function() {
										uni.showToast({
											title: "保存失败2",
											icon: "none"
										});
									}
								})
							} 
						}
					});
				}
				if(type == 4) {
					this.$refs.previewpup.close();
				}
				return ;
			},
			cancelFun() {
				var that = this;
				uni.showModal({
				    title: '提示',
				    content: '您确定要撤回该笔赠送吗',
				    success: function (res) {
				        if (res.confirm) {
							serve.request({
								url: '/member/member/give-cancel',
								data: {
									id: that.id
								}
							}).then(res => {
								uni.showToast({
									title:res.message,
									icon: 'none'
								});
								if(res.code == 200) {
									that.getInfo();
								} 
							});
						}
					}
				});
			},
			receiveFun() {
				var that = this;
				uni.showModal({
				    title: '提示',
				    content: '您确定接受该笔赠送吗',
				    success: function (res) {
				        if (res.confirm) {
							serve.request({
								url: '/member/member/give-receive',
								data: {
									id: that.id
								}
							}).then(res => {
								uni.showToast({
									title:res.message,
									icon: 'none'
								});
								if(res.code == 200) {
									that.getInfo();
								} 
							});
						}
					}
				});
			},
			rejectFun() {
				var that = this;
				uni.showModal({
				    title: '提示',
				    content: '您确定要退回该笔赠送吗',
				    success: function (res) {
				        if (res.confirm) {
							serve.request({
								url: '/member/member/give-reject',
								data: {
									id: that.id
								}
							}).then(res => {
								uni.showToast({
									title:res.message,
									icon: 'none'
								});
								if(res.code == 200) {
									that.getInfo();
								} 
							});
						}
					}
				});
			},
			obtainImgUrl(imgUrl) {
				return serve.imgUrl()+imgUrl;
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			var that = this;
			that.id = options.id || 0;
			if(options.q) {
				var link = decodeURIComponent(options.q);
				var paramArr = link.split('=');
				that.id = paramArr[1];
			} 
			let scene = options.scene || "";
			if(scene != "") {
				scene = decodeURIComponent(scene);
				let sceneArr = scene.split("=");
				let optionArr = sceneArr[1].split("-");
				uni.setStorageSync('shanhaiKey', optionArr[0]);
				that.id = optionArr[1];
			}
			if(that.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							that.jump('return_one')
						}, 2000) 
					}
				});
			}
		},
		async onShow() {
			await this.$defaultLogin();
			this.accessToken = uni.getStorageSync('access-token');
			this.getInfo();
		},
		onPullDownRefresh() {
			this.getInfo();
		},
	}
</script>

<style  scoped lang="scss">
	.productDetail {
		padding-bottom: 120rpx;
		.imgView {
			position: relative;
			width: 750upx;
			padding: 0upx 20upx;
			align-items: center;
			justify-content: center;
			.img{
				width: 100%;
			}
			.downloadView {
				position: absolute;
				right: 50rpx;
				bottom: 20rpx;
			}
		}
		.info {
			box-sizing: border-box;
			padding: 0rpx 30rpx;
			position: relative;
			.top {
				position: relative;
				.title {
					font-size: 32rpx;
					font-weight: bold;
					padding-bottom: 10rpx;
				}
				.sketch {
					font-size: 30rpx;
					padding-bottom: 20rpx;
					color: #999;
				}
			}
			.showStatusName {
				position: absolute;
				right: 50rpx;
				top: 50rpx;
			}
		}
		.bot {
			position: fixed;
			width: 100%;
			height: 150upx;
			bottom: 0upx;
			border-top: 1upx #EBECF0 solid;
		    padding-bottom: 0upx;
			margin-bottom: -50upx;
			.txt2 {
				box-shadow: 0px 1upx 0px 0px rgba(235, 236, 240, 1);
				display: flex;
				width: 100%;
				height: 100%;
			}
			.btn {
				text-align: center;
				width: 50%;
				color: #ffffff;
				padding-top: 10rpx;
				letter-spacing: 10rpx;
				text-indent: 10rpx;
				font-size: 34rpx;
			}
			
			.goShare {
				border: 1rpx solid #ffd900;
				background: #ffd900;
			}
			.goCancel {
				border: 1rpx solid #868686;
				background: #868686;
			}
			.goReceive {
				border: 1rpx solid #ffd900;
				background: #ffd900;
			}
			.goReject {
				border: 1rpx solid #868686;
				background: #868686;
			}
		}
		.popbox{
			width: 100vw;
			height: 100vh;
			//background-color: #333;
			display: flex;
			flex-direction: column; 
			justify-content: flex-start;
			align-items: center;
			padding-bottom: 140upx;
			position: relative;
			
			.swiper{
				width: 100%; 
				height: 100%;
				min-height: 500upx;
				position: absolute;
				top:0upx;
				left:0upx;
				
				.swiper-item{
					width: 100%; 
					height: 100%;
					min-height: 500upx;
					padding-bottom: 120upx;
					background-color: rgba(#000,0.8);
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					
					.imagebox{
						width: 100%;
						height: auto;
						min-height: 300upx; 
						background-size: 20% auto;
						background-position: center center;
						
						image{
							width: 100%;
							height: auto;
						}
					}
				}
			}
		
			.maskshowrev {
				width: 100%;
				height: 50upx;
				bottom: 250upx;
				position: fixed;
				display: flex;
				justify-content: space-around;
				
				//border: 1upx #fff solid;
				.btall {
					height: 50upx;
					border-radius: 25upx;
					padding: 0 20upx;
					color: #Fff;
					font-size: 24upx;
					line-height: 50upx;
					font-weight: normal;
					text-align: center; 
				}
				
				.bt1 {background-color: rgba(#780000, 0.9);}
				.bt2 {background-color: rgba(#7bc9d3, 0.9);}
				.bt3 {background-color: rgba(#ffcc00, 0.9);}
			}
		}
	}
</style>